{% load property_tags %}

<div class="status_bar_item" id="select_buttons">Select All | Deselect All</div>
<div class="status_bar_item" id="view_buttons">View All({{ count }}) | Selected(0)</div>

<!-- Pagination -->
<div class="status_bar_item" id="pagination">
    <span class="step-links">
    {% if properties.has_previous %}
        <a href="?page={{ properties.previous_page_number }}{% ifnotequal limit 10 %}&limit={{ limit }}{% endifnotequal %}">previous</a>
    {% endif %}

    <span class="current">
            Page {{ properties.number }} of {{ properties.paginator.num_pages }}.
        </span>

    {% if properties.has_next %}
        <a href="?page={{ properties.next_page_number }}{% ifnotequal limit 10 %}&limit={{ limit }}{% endifnotequal %}">next</a>
    {% endif %}
    </span>
</div>

<!-- Per Page -->
<div class="status_bar_item" id="per_page">
    <button onclick="toggle_panel($('#per_page .choice'));">{{ limit }}/Page</button>
    <ul class="choice">
        <li><a>10</a></li>
        <li class="odd"><a>20</a></li>
        <li><a>30</a></li>
        <li class="odd"><a>40</a></li>
        <li><a>50</a></li>
    </ul>
</div>

<div class="status_bar_item" id="sorting">
    <button onclick="toggle_panel($('#sorting .choice'));">Sort By:{{ sort|capfirst }}</button>
    <ul class="choice">
        <li><a id="address">Address</a></li>
        <li class="odd"><a id="sale_price">Sale Price</a></li>
        <li><a id="sale_date">Sale Date</a></li>
        <li class="odd"><a id="lot_plan">Lot Plan</a></li>
        <li><a id="zoning">Zoning</a></li>
        <li class="odd"><a id="category">Category</a></li>
        <li><a id="land_use">Land Use</a></li>
        <li class="odd"><a id="bedroom">Bedroom</a></li>
        <li><a id="bathroom">Bathroom</a></li>
        <li class="odd"><a id="car_space">Car Space</a></li>
        <li><a id="land_size">Land Size</a></li>
    </ul>
</div>

<script type="text/javascript">
    function toggle_panel(element) {
        $(element).toggle();
    }
    function register_url() {

        var param = get_limit_param();
        $.each($('#per_page .choice LI A'), function(index, object){
            var temp_per_page = $(object).html();
            if(temp_per_page!={{ limit }}) {
                param.limit = temp_per_page;
                $(object).attr('href', '{{ request.path_info }}'+'?'+$.param(param));
            } else {
                $(object).addClass('disable');
            }
        });
        param = get_sort_param();
        $.each($('#sorting .choice LI A'), function(index, object){
            var temp_sort = $(object).attr('id');
            if(temp_sort!='{{ sort }}') {
                param.sort = temp_sort;
                $(object).attr('href', '{{ request.path_info }}'+'?'+$.param(param));
            } else {
                $(object).addClass('disable');
            }
        });
    }
    function get_sort_param() {
        if ({{ limit }}!=10)
            return {sort:'{{ sort }}', limit:{{ limit }}};
         else 
            return {sort:'{{ sort }}'};
    }
    function get_limit_param() {
        if ('{{ sort }}'!='address')
            return {sort:'{{ sort }}', limit:{{ limit }}};
        else
            return {limit:{{ limit }}};
    }

    $(document).ready(function(){
        register_url();
    });
</script>

<style type="text/css">
    .status_bar_item {
        float:left;
        margin-right:20px;
    }
    .status_bar_item button {
        border:1px solid #ccc;
        border-radius:5px;
    }
    .choice {
        list-style: none;border:1px solid #666;
        border-radius:5px;
        box-shadow:2px 2px 2px 0 #ccc;
    }
    .choice {
        margin:0 0 0 5px;
        padding: 2px 0 2px 0;
        position: absolute;
        background-color: #f5f5f5;
        display: none;
    }
    .choice li {
        background-color: #f5f5f5;
    }
    .choice li a {
        padding: 5px 20px 5px 20px;
        text-decoration: none;
    }
    .choice li .disable {
        color: #ccc;
    }
    .choice .odd {
        background-color: #e5eCf9;
    }
    .choice li:hover {
        background-color: #565656;
        color: #ffffff;
    }
</style>
